<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>iLEADER</title>
  <link rel="stylesheet" href="../dist/lib/layui/css/layui.css">
  <link rel="stylesheet" href="../dist/css/course_set.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header header header-demo"></div>
  <div class="layui-side layui-bg-black"></div>
  <!-- content start -->
  <div class="layui-body" style="padding-left: 10px">
    <!-- *************** 分割线 ****************** -->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px">
      <legend>课时设置 <span style="color: #999; font-size: 16px">(可拖拽进行排序)</span></legend>
    </fieldset>
    <div class="xh-cd-main" id="courseSetting" style="opacity: 0">
      <div class="xh-task-header layui-clear">
        <div class="pull-left course-time">课时总数：{{totalClass}}</div>
        <div class="pull-right">
          <div class="xh-dropdown">
            <button class="layui-btn layui-btn-primary layui-btn-sm">添加章 / 节<i class="layui-icon rect">&#xe625;</i></button>
            <ul class="layui-nav-child layui-anim layui-anim-upbit">
              <li><a href="javascript:;" @click="handleToolbarAddChapter">添加章</a></li>
              <li><a href="javascript:;" @click="handleToolbarAddUnit">添加节</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="xh-task-tips" v-if="!chapterList || !chapterList.length">
        <i class="layui-icon">&#xe6af;</i>
        什么都没有，快去添加一个课时
      </div>
      <ul class="xh-task-list" v-if="chapterList && chapterList.length">
        <draggable v-model="chapterList" draggable="li" @change="handleSortChange">
        <li class="task-manage-chapter" v-for="(chapter, chapterIndex) in chapterList" :key="chapter.chapterId">
          <div class="task-manage-item" v-if="chapter.isShowHeader">
            <div class="item-content layui-clear">
              <div class="item-tag" @click="handleChapterItemClick(chapter)">
                <i class="layui-icon" :class="chapter.isOpen ? 'layui-icon-down' : 'layui-icon-right'"></i>
                <span class="item-name">
                  第
                  <span class="num">{{chapterIndex + chapterStartIndex}}</span>
                  章
                </span>：{{chapter.chapterName}}
              </div>
              <div class="item-actions">
                <div class="xh-dropdown">
                  <a href="javascript:;" class="action"><i class="layui-icon">&#xe654;</i></a>
                  <ul class="layui-nav-child layui-anim layui-anim-upbit">
                      <li><a href="javascript:;" @click.stop="handleChapterAddUnit(chapter)">添加节</a></li>
                  </ul>
                </div>
                <div class="xh-dropdown">
                  <a href="javascript:;" class="action"><i class="layui-icon">&#xe65f;</i></a>
                  <ul class="layui-nav-child layui-anim layui-anim-upbit">
                    <li><a href="javascript:;" @click.stop="handleChapterEdit(chapter)">编辑</a></li>
                    <li><a href="javascript:;" @click.stop="handleChapterDelete(chapter)">删除</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <ul class="task-unit-list" v-show="chapter.isOpen">
            <draggable v-model="chapter.unitList" draggable="li" @change="handleSortChange">
            <li class="task-manage-unit" v-for="(unit, index) in chapter.unitList" :key="unit.unitId">
              <div class="task-manage-item">
                <div class="item-content layui-clear">
                  <div class="item-tag" @click="handleUnitContentClick(unit)">
                    <i class="layui-icon" :class="unit.isOpen ? 'layui-icon-down' : 'layui-icon-right'"></i>
                    <span class="item-name">第<span class="num">{{index + 1}}</span>节</span>
                    ：{{unit.unitName}}
                  </div>
                  <div class="item-actions">
                    <div class="xh-dropdown">
                      <a href="javascript:;" class="action"><i class="layui-icon">&#xe65f;</i></a>
                      <ul class="layui-nav-child layui-anim layui-anim-upbit">
                        <li><a href="javascript:;" @click.stop="handleUnitEdit(chapter, unit)">编辑</a></li>
                        <li><a href="javascript:;" @click.stop="handleUnitDelete(chapter, unit)">删除</a></li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item-expand-con" v-show="unit.isOpen">
                <div class="expand-item"><a href="javascript:;" :class="{'active': unit.textBook}" @click="handleUnitAddTextbook(chapter, unit)"><i class="layui-icon">&#xe705;</i>绑定教材</a></div>
                <i class="layui-icon">&#xe65b;</i>
                <div class="expand-item"><a href="javascript:;" :class="{'active': unit.test}" @click="handleUnitAddTest(chapter, unit)"><i class="layui-icon">&#xe6b2;</i>测试</a></div>
              </div>
            </li>
            </draggable>
          </ul>
        </li>
        </draggable>
      </ul>
    </div>
    <!-- *************** 分割线 ****************** -->
  </div>
  <!-- content end-->
</div>
<!-- 添加/修改章 -->
<script type="text/html" id="addChapter">
  <form class="layui-form" style="padding: 30px 60px 20px 0">
    <div class="layui-form-item">
      <label class="layui-form-label">章名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入章名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit style="width: 100px;" lay-filter="addChapterForm">确定</button>
      </div>
    </div>
  </form>
</script>
<!-- 添加/修改节 -->
<script type="text/html" id="addUnit">
  <form class="layui-form" style="padding: 30px 60px 20px 0">
    <div class="layui-form-item">
      <label class="layui-form-label">节名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required" placeholder="请输入节名称" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit style="width: 100px;" lay-filter="addUnitForm">确定</button>
      </div>
    </div>
  </form>
</script>
<!-- 添加教材 -->
<script type="text/html" id="bindTextBook">
  <form class="layui-form" action="" style="padding: 30px 60px 20px 0">
    <div class="layui-form-item">
      <label class="layui-form-label">教材类别</label>
      <div class="layui-input-block">
        <select name="type" lay-filter="type" lay-verify="required" lay-search id="textBookType"></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">关联教材</label>
      <div class="layui-input-block">
        <select name="textBook" lay-verify="required" lay-search id="textBox"></select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">时长</label>
      <div class="layui-input-block">
        <input type="text" name="time" required lay-verify="required" placeholder="精确到秒" autocomplete="off"
               class="layui-input" id="timeChoose">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit style="width: 100px;" lay-filter="addTextBook">确定</button>
      </div>
    </div>
  </form>
</script>
<!-- 添加测试 -->
<script type="text/html" id="bindTest">
  <form class="layui-form" action="" style="padding: 30px 60px 20px 0">
    <div class="layui-form-item">
      <label class="layui-form-label">测试题目</label>
      <div class="layui-input-block">
        <input type="text" name="title" required lay-verify="required" placeholder="请输入测试题目" autocomplete="off" class="layui-input" id="testName">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">关联试卷</label>
      <div class="layui-input-block">
        <select name="test" lay-verify="required" lay-search id="test"></select>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit style="width: 100px;" lay-filter="addTest">确定</button>
      </div>
    </div>
  </form>
</script>
<script src="../dist/lib/jquery.min.js"></script>
<script src="../dist/lib/vue.min.js"></script>
<script src="../dist/lib/lodash.min.js"></script>
<script src="../dist/lib/layui/layui.js"></script>
<script src="../dist/lib/Sortable1.min.js"></script>
<script src="../dist/lib/vuedraggable.umd.js"></script>
<script src="../dist/js/class-time-setting.js"></script>
</body>
</html>